import React from 'react';

interface GlassInputProps {
  /** 输入值 */
  value: string;
  /** 值变化回调 */
  onChange: (value: string) => void;
  /** 占位符 */
  placeholder?: string;
  /** 自定义类名 */
  className?: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 输入类型 */
  type?: 'text' | 'email' | 'password' | 'number';
  /** 标签 */
  label?: string;
  /** 错误信息 */
  error?: string;
  /** 回车键回调 */
  onEnter?: () => void;
}

/**
 * 毛玻璃输入框组件
 * 提供聚焦时的视觉反馈和平滑过渡效果
 */
export const GlassInput: React.FC<GlassInputProps> = ({
  value,
  onChange,
  placeholder = '',
  className = '',
  disabled = false,
  type = 'text',
  label,
  error,
  onEnter,
}) => {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && onEnter) {
      onEnter();
    }
  };

  return (
    <div className={`w-full ${className}`}>
      {label && (
        <label className="block text-emerald-700 text-sm font-medium mb-2">
          {label}
        </label>
      )}
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        disabled={disabled}
        className={`
          w-full px-4 py-2.5
          bg-white/80 backdrop-blur-md
          border rounded-lg
          text-gray-700 placeholder-gray-400
          outline-none
          transition-all duration-300
          ${error 
            ? 'border-red-400 focus:border-red-500' 
            : 'border-emerald-200 focus:border-emerald-400 focus:bg-white'
          }
          ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
        `}
      />
      {error && (
        <p className="mt-1 text-sm text-red-500">{error}</p>
      )}
    </div>
  );
};

export default GlassInput;
